<template>
    <div class="file-item">
        <div class="title" :class="[props.fileData?.materialType, 'mr20']" :title="props.fileData?.materialFullName">{{ props.fileData?.materialFullName }}</div>
        <div class="file-op" v-if="props.showOp || props.delOp || props.showPreview">
            <span class="btn-icon mr20" v-if="props.showPreview" @click="preview">预览</span>
            <fileDownload v-if="props.showOp" :material="props.fileData" :tooltipDisabled="true" downloadClass="option-btn" :showText="false">
               <span class="btn-icon">下载</span>
            </fileDownload>
            <i  v-if="props.delOp" class="iconfont icon-shanchu down-icon" @click="handleDel"></i>
        </div>
    </div>
    <ContentPreviewDialog v-model="fileModelShow" :form="filePreviewData"/>
</template>

<script setup>
import {ref} from 'vue';
import ContentPreviewDialog from '@/components/content-preview-dialog.vue';
import fileDownload from '@/components/file-download.vue';

const emit = defineEmits(['handle-del'])

const props = defineProps({
    fileData: {
        type: Object,
        default: () => {
            return {};
        }
    },
    showOp: {
        type: Boolean,
        default: false
    },
    delOp: {
        type: Boolean,
        default: false
    },
    showPreview: { // 是否显示预览
        type: Boolean,
        default: false
    },
})

const fileModelShow = ref(false); // 文件预览弹窗是否显示
const filePreviewData = ref({});

// 查看文件
function preview () {
    if(props.showOp) {
        fileModelShow.value = true;
        filePreviewData.value = {
            materialVO: props.fileData
        }
    }
}

function handleDel() {
    emit('handle-del');
}


</script>

<style lang="scss" scoped>

@mixin img-style() {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px 12px 14px;
    background: #F7F9FA;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1;
    .mr20 {
        margin-right: 20px;
    }

    .title {
        font-size: 14px;
        color: var(--srt-main-text-color);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.op{
            cursor: pointer;
            &:hover {
                color: var(--srt-main-active-text-color);
            }
        }

        &.doc, &.docx {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/doc.png') no-repeat;
                background-size: contain;
            }
        }

        &.ppt, &.pptx {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/ppt.png') no-repeat;
                background-size: contain;
            }
        }
        &.xls, &.xlsx{
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/excel.png') no-repeat;
                background-size: contain;
            }
        }
        
        &.img {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/img.png') no-repeat;
                background-size: contain;
            }
        }

        &.files {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/files.png') no-repeat;
                background-size: contain;
            }
        }

        &.pdf {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/pdf.png') no-repeat;
                background-size: contain;
            }
        }

        &.audio {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/audio.png') no-repeat;
                background-size: contain;
            }
        }

        &.video{
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/video.png') no-repeat;
                background-size: contain;
            }
        }

        &.rest,
        &.unknown {
            &::before {
                @include img-style();
                background: url('~@/assets/img/resource-type/rest.png') no-repeat;
                background-size: contain;
            }
        }
    }
    .down-icon {
        font-size: 18px;
        color: var(--srt-color-gray);
        cursor: pointer;
        margin-left: 12px;
        &:hover {
            color: var(--srt-main-active-text-color);
        }
    }
    .btn-icon {
        color: var(--srt-main-active-text-color);
        cursor: pointer;
    }
}
</style>